<script setup>
import { ref, defineExpose } from 'vue';
import { useDocumentStore } from "@/stores/documentStore.js";

const documentStore = useDocumentStore();
const visible = ref(false);
const form = ref({
  templateName: '',
  templateType: 'CIVIL',
  templateContent: '',
  description: ''
});

const show = () => {
  documentStore.getTemplates();
  visible.value = true;
};

const handleSubmit = () => {
  documentStore.addTemplate(form.value).then(() => {
    form.value = {
      templateName: '',
      templateType: 'CIVIL',
      templateContent: '',
      description: ''
    };
  });
};

defineExpose({
  show
});
</script>

<template>
  <el-dialog v-model="visible" title="模板管理" width="70%">
    <el-tabs>
      <el-tab-pane label="模板列表">
        <el-table :data="documentStore.templateList" border>
          <el-table-column prop="templateName" label="模板名称" />
          <el-table-column prop="templateType" label="模板类型" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="viewTemplate(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="添加模板">
        <el-form :model="form" label-width="100px">
          <el-form-item label="模板名称" required>
            <el-input v-model="form.templateName" placeholder="请输入模板名称" />
          </el-form-item>
          <el-form-item label="模板类型" required>
            <el-select v-model="form.templateType" placeholder="请选择模板类型">
              <el-option label="民事" value="CIVIL" />
              <el-option label="刑事" value="CRIMINAL" />
              <el-option label="其他" value="OTHER" />
            </el-select>
          </el-form-item>
          <el-form-item label="模板内容" required>
            <el-input
                v-model="form.templateContent"
                type="textarea"
                :rows="10"
                placeholder="请输入HTML格式的模板内容"
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>